<template>
  <!-- 选择仓库 -->
    <el-dialog title="信息" :visible.sync="openSelectWarehouse" width="1200px" append-to-body :destroy-on-close="true" :before-close="beforeClose">
      <el-form ref="form" @submit.native.prevent :model="formQuery" label-width="100px" :inline="true" v-show="showSearch">
        <el-form-item label="条码" prop="sptm">
          <el-input
            v-model="formQuery.sptm"
            placeholder="请输入条码"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
        <el-form-item label="柜号" prop="spgh">
          <el-input
            v-model="formQuery.spgh"
            placeholder="请输入柜号"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
        <el-form-item label="批号" prop="spbh">
          <el-input
            v-model="formQuery.spbh"
            placeholder="请输入批号"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
        <el-form-item label="仓库" prop="spckmc">
          <el-input
            v-model="formQuery.spckmc"
            placeholder="请输入仓库"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
        <el-form-item label="仓位" prop="ckcw">
          <el-input
            v-model="formQuery.ckcw"
            placeholder="请输入仓位"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
         <el-form-item label="物品规格" prop="spzs">
          <el-input
            v-model="formQuery.spzs"
            placeholder="请输入物品规格"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
         <el-form-item label="物品名称" prop="spmc">
          <el-input
            v-model="formQuery.spmc"
            placeholder="请输入物品名称"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
         <el-form-item label="品牌" prop="spmc">
          <el-input
            v-model="formQuery.spmc"
            placeholder="请输入品牌"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
        <el-form-item label="入仓日期" prop="warehouseInDate">
          <el-date-picker
              v-model="warehouseInDate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="warehouseInDateChange()">
              </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">搜 索</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain size="mini" @click="handleExport" :disabled="selection.length === 0">导出勾选数据</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="warehouseList"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        @row-click="handleRowClick"
        :row-class-name="tableRowClassName"
      >
        <af-table-column type="selection" width="50" align="center" /> 
        <af-table-column label="用户条码" align="center" prop="sptm" />
        <af-table-column label="仓库条码" align="center" prop="sptmc" />
        <af-table-column label="所有者" align="center" prop="spkhmc" />
        <af-table-column label="仓库" align="center" prop="spckmc" />
        <af-table-column label="剩余件数" align="center" prop="spjs2" />
        <af-table-column label="单重(KG)" align="center" prop="spjsl" />
        <af-table-column label="剩余重量(吨)" align="center" prop="spsl2" />
        <af-table-column label="冻结件数" align="center" prop="spjsf" />
        <af-table-column label="冻结重量(吨)" align="center" prop="spslf" />
        <af-table-column label="物品规格" align="center" prop="spzs" />
        <af-table-column label="品牌" align="center" prop="spcd" />
        <af-table-column label="柜号" align="center" prop="spgh" />
        <af-table-column label="批号" align="center" prop="spbh" />
        <af-table-column label="纱支" align="center" prop="wpggA" />
        <af-table-column label="工艺" align="center" prop="wpggB" />
        <af-table-column label="工序" align="center" prop="wpggC" />
        <af-table-column label="用途" align="center" prop="wpggD" />
        <af-table-column label="产地" align="center" prop="wpggE" />
        <af-table-column label="漂染性" align="center" prop="wpggF" />
        <af-table-column label="生产日期" align="center" prop="wpggG" />
        <af-table-column label="颜色" align="center" prop="wpggH" />
        <af-table-column label="入仓日期" align="center" prop="ssrqid" />
        <af-table-column label="估价单价" align="center" prop="spdj" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSelect">多选录入</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { selectStock } from "@/api/storage/commonGoods/increServiceFee";
import ExportJsonExcel from 'js-export-excel'

export default {
  name: "WarehouseOutSelectWarehouse",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
       //列表加载
      loading: true,
      //弹窗状态
      openSelectWarehouse: false,
      //入仓时间
      warehouseInDate:"",
      // 查询参数
      formQuery: {
        khmc: "",
        spbh: "",
        spcd: "",
        spckmc: "",
        spcwid: "",
        spgh: "",
        spkhmcid: "",
        spmc: "",
        sptm: "",
        spzs: "",
        ssrqid1: "",
        ssrqid2: "",
        bz: "",
        bzdj: "",
        ckcw: "",
      },
      //勾选数据
      selection:[],
      //excel导出
      exportList: [],
      //行数据
      warehouseList:[],
      //页数
      pageSize: 10,
      //页码
      pageNum:1,
      // 总条数
      total: 0,
    };
  },
  methods: {
    /**获取仓库信息 */
    getList() {
      this.loading=true
      selectStock(this.formQuery, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
        this.warehouseList = response.rows;
        this.total = response.total
        this.loading=false
      });
    },
     /**入仓日期 */
    warehouseInDateChange() {
      this.queryParams.ssrqid1 = this.warehouseInDate[0]
      this.queryParams.ssrqid2 = this.warehouseInDate[1]
      this.getList()
    },
    /**仓库搜索 */
    handleQuery() {
        this.getList()
    },
    /** 选择录入*/
    handleSelect() {
      this.$emit('warehouseSelected', this.selection)
      this.close()
    },
     // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection
    },
    /**点击列表行触发 */
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /**选中行 */
    tableRowClassName({row, rowIndex}) {
      if(this.selection.some((item) => item === row)) {
        return "selected-bg-color"
      }
      return ""
    },
     /** 导出勾选数据*/
    handleExport() {
      if (this.selection.length > 0) {
        let option = {}
        option.fileName = '货物出仓库存勾选数据'
        option.datas = [
          {
            sheetData: this.selection,//数据
            sheetName: 'sheet',
            //表头数据对应的sheetData数据
            sheetFilter: ['sptm', 'sptmc', 'spkhmc', 'spckmc', 'spjs2', 'spjsl', 'spsl2', 'spjsf',
             'spslf', 'spzs', 'spcd', 'spgh', 'spbh', 'wpggA', 'wpggB', 'wpggC','wpggD','wpggE',
             'wpggF', 'wpggG', 'wpggH', 'ssrqid', 'spdj'
             ],
            sheetHeader: [
              //表头数据
              '用户条码', '仓库条码', '所有者', '仓库', '剩余件数', '单重(KG)', '剩余重量(吨)','冻结件数', '冻结重量(吨)',
              '物品规格','品牌','柜号','批号','纱支','工艺','工序','用途','产地','漂染性','生产日期','颜色','入仓日期','估价单价'],
          }
        ]
        let excel = ExportJsonExcel(option)
        excel.saveExcel()
      } else {
        this.$modal.msgError('请勾选数据');
      }
      ;
    },
    /**改变窗口状态 */
    changeSelectWarehouse() {
      this.openSelectWarehouse = !this.openSelectWarehouse;
    },
    /** 清除数据 */
    reset() {
      Object.assign(this.$data, this.$options.data())
    },
      /**enter键触发 */
    enterClick(e) {
      this.getList()
    },
    /**关闭弹窗 */
    beforeClose(done) {
      this.close()
      done()
    },
    /**关闭弹窗 */
    close() {
      this.changeSelectWarehouse()
      this.reset()
    },
    /**打开弹窗 */
    open(inp, id) {
      this.formQuery.spkhmcid = id
      this.formQuery.inp = inp
      this.changeSelectWarehouse()
      this.getList()
    }
  }
};
</script>
